<template>
  <div class="examinationWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <div class="searchWrap">
            <span class="searchFont">特征指标:</span>
            <el-radio-group size="mini" v-model="radio3" @change="searchRowsInfo(true)">
              <span v-for="(item, index) in options" :key="index" style="margin-right: 15px;">
                <el-radio-button :label="item.value">{{item.label}}</el-radio-button>
              </span>
            </el-radio-group>
          </div>
        </div>
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="7">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" style="width: 35%;">
                  <el-select v-model="searchInfo.districtId" @change="changeDistrict(searchInfo.districtId)" :disabled="$store.state.userInfo.regionId?true:false" size="mini"
                             clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                <span class="searchInputFont" style="width: 38%;">
                    <el-select v-model="searchInfo.streetId" @change="searchRowsInfo(true)" size="mini"  clearable  placeholder="街道">
                      <el-option
                        v-for="item in streetData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                 </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">查询时间:</span>
                <span class="searchInputFont">
                   <el-date-picker
                     style="width: 100%;"
                     v-model="value6"
                     type="daterange"
                     align="left"
                     @change="searchRowsInfo()"
                     placeholder="选择日期范围"
                     size="mini"
                     :clearable="false"
                     :picker-options="pickerOptions2">
                    </el-date-picker>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo(true)">查询</el-button>
              <!--<el-button type="primary" size="mini" @click="searchEleInfo()">导出</el-button>-->
            </div>
          </el-row>
        </div>
      </div>
      <div class="echartsWrap">
        <div v-show="radio3==1||radio3==3" style="position: absolute;right: 20px;top: 15px;font-size: 12px;">
          <span v-for="(item,index) in enterpriseAvgList" :key="index">{{item.enterpriseName}}平均值<span style="margin-left: 5px;margin-right: 10px;color:#3975FE; ">{{item.dayAvgSum}}</span></span>
        </div>
        <div v-show="radio3==4" style="position: absolute;right: 20px;top: 15px;font-size: 12px;z-index: 5;">
          <el-button type="primary" @click="changeRowsInfo()"  size="mini" ><i style="font-size: 14px;margin-right: 5px;" class="iconfont icon-qiehuan"></i>{{kgOrkm}}</el-button>
        </div>

        <ridingCountEcharts ref="ridingCountEcharts"  :perHourData="perHourData1" :allCompanyNames="allCompanyNames" :perHour="dataList" :titleEcharts="titleEcharts"></ridingCountEcharts>
      </div>
      <div class="tableEchartsWrap" >
        <!--show-summary-->
        <div class="tableInner" ref="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            width="100%"
          >
            <el-table-column
              label="企业"
              prop="enterpriseName"
              show-overflow-tooltip
            >

            </el-table-column>
            <el-table-column
              v-for="(item,key) in dataList"
              :key="key"
              :prop="item"
              :label="item"
              min-width="100"
              show-overflow-tooltip>
            </el-table-column>

          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ridingCountEcharts from './ridingCountEcharts.vue';
  export default {
    props: [],
    data(){
      return {
        perHourData1: [],
        allCompanyNames: ['摩拜', 'OFO'],
        perHour: ["第一季度", "第二季度", "第三季度", "第四季度"],
        titleEcharts: ["各企业订单数量", "单位(单)"],
        options: [
          {
          value: '1',
          label: '日均骑行量'
        }, {
          value: '2',
          label: '车辆周转率'
        }, {
          value: '3',
          label: '平均骑行时间'
        }, {
          value: '4',
          label: '节能减排'
        }],
        enterpriseAvgList:[],
        rows: [
          {enterpriseName: "摩拜", count: "87589"},
        ],
        dataList:[],
        multipleSelection: [],
        dialogFormVisible: false,
        kgOrkm: "公里数",
        checkAll: false,
        isCheckAll: false,
        isKg: true,
        currentRow: null,
        pageSize: 10,
        count: 1468,
        loading: true,
        currentPage: 1,
        ruleFormEdit: {
          enterpriseId: "",
          labelId: ""
        },
        //以下为搜索
        labelChecked: "",
        radio3: "1",
        value6: "",
        tableHeight: 400,
        streetData:[],
        searchInfo: {
          "districtId":this.$store.state.userInfo.regionId,
          "streetId":"",
          "beginDateStr":"",
          "endDateStr":""
        },
        pickerOptions2: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }]
        },
      }
    },
    components: {ridingCountEcharts,},
    created(){
      this.value6=[new Date().getTime() - 3600 * 1000 * 24 * 6,new Date()]
      this.searchRowsInfo()
      setTimeout(()=>{
        if(this.$store.state.userInfo.regionId){this.changeDistrict(this.searchInfo.districtId)}
      },500)
    },
    mounted(){

      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".examinationWrap").clientHeight - 445
      })
    },

    methods: {
      //获取街道
      changeDistrict(districtId){
        this.searchRowsInfo(true)
        if(!districtId){
          this.searchInfo.streetId=""
          this.streetData=[]
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion',{parentId:districtId})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })
      },
      changeRowsInfo(){
        this.isKg=!this.isKg
          let url = 'selectEnergyReductionSumDay', objName = this.isKg?"energyReduction":"distanceTotal"
          this.titleEcharts = this.isKg?["节能减排", "单位(千克)"]:["节能减排", "单位(米)"]
          this.kgOrkm=this.isKg?"公里数":"排放量"
          if (this.value6&&this.value6[0] != null) {
            this.searchInfo.beginDateStr = this.dtime(this.value6[0]).format('YYYY-MM-DD')
            this.searchInfo.endDateStr = this.dtime(this.value6[1]).format('YYYY-MM-DD')
          } else {
            this.searchInfo.beginDateStr = ""
            this.searchInfo.endDateStr = ""
          }
          this.axios.post(process.env.API_HOST + `/statis/`+url, this.searchInfo)
            .then(response => {
              const result = response.data
              if(result.code==200){
                if(result.result&&result.result.length>0){
                  this.rows = []
                  this.dataList=[]
                  let obj={enterpriseName:"合计"},enterObj={}
                  result.result.forEach((item)=>{
                    if(item.colletions.length>0){
                      this.dataList.push(this.dtime(item.statisDate).format("MM-DD"))
                      this.sortByKey(item.colletions, "enterpriseNo").forEach((item1,index)=>{
                        if(!enterObj[item1.enterpriseNo]){
                          enterObj[item1.enterpriseNo]={}
                          enterObj[item1.enterpriseNo].enterpriseName=item1.enterpriseName
                        }

                        enterObj[item1.enterpriseNo][this.dtime(item.statisDate).format("MM-DD")]=item1[objName]
                        obj[this.dtime(item.statisDate).format("MM-DD")]=0
                      })
                    }
                  })
                  for(var i in enterObj){
                    this.rows.push(enterObj[i])
                  }
                  this.allCompanyNames=[]
                  this.rows.forEach((item,index)=>{
                    this.allCompanyNames.push(item.enterpriseName)
                    this.perHourData1[index]=[]
                    for(var i in item){
                      if(i!="enterpriseName"){
                        this.perHourData1[index].push(item[i]?item[i]:"0")
                        obj[i]+=item[i]?item[i]:0
                        obj[i]=this.toDecimal(obj[i])
                      }
                    }
                  })
                  this.rows.push(obj)
                  setTimeout(()=>{
                    this.$refs.ridingCountEcharts.initData()
                  })
                }else {
                  this.enterpriseAvgList=[]
                  this.rows=[]
                  this.perHourData1=[]
                  this.allCompanyNames=[]
                  this.dataList=[]
                  setTimeout(()=>{
                    this.$refs.ridingCountEcharts.initData()
                  })

                }

              }else {
                this.enterpriseAvgList=[]
                this.rows=[]
                this.perHourData1=[]
                this.allCompanyNames=[]
                this.dataList=[]
                setTimeout(()=>{
                  this.$refs.ridingCountEcharts.initData()
                })
              }
            })

      },
      //获取所有信息
      searchRowsInfo(key){
        let url = "", objName = ""
        switch (this.radio3) {
          case "1": //日均骑行量
            url = 'selectOrderSumDay'
            objName = "orderTotal"
            this.titleEcharts = ["日均骑行量", "单位(单)"]
            break;
          case "2":   //车辆周转率
            url = 'selectVehicleRevolveSumDay'
            objName = "revolveRate"
            this.titleEcharts = ["车辆周转率", "周转率"]
            break;
          case "3":   //平均骑行时间
            url = 'selectCyclingTimeSumDay'
            objName = "timeTotal"
            this.titleEcharts = ["平均骑行时间", "时间(分钟)"]
            break;
          case "4":   //节能减排
            url = 'selectEnergyReductionSumDay'
            objName = "energyReduction"
            this.titleEcharts = ["节能减排", "单位(千克)"]
            break;
          default:
            url = 'selectOrderSumDay'
            objName = "orderTotal"
            this.titleEcharts = ["订单数量", "单位(单)"]
        }
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginDateStr = this.dtime(this.value6[0]).format('YYYY-MM-DD')
          this.searchInfo.endDateStr = this.dtime(this.value6[1]).format('YYYY-MM-DD')
        } else {
          this.searchInfo.beginDateStr = ""
          this.searchInfo.endDateStr = ""
        }
        this.axios.post(process.env.API_HOST + `/statis/`+url, this.searchInfo)
          .then(response => {
            const result = response.data
            if(result.code==200){
              if(this.radio3==1||this.radio3==3){
                this.enterpriseAvgList=this.radio3==1?result.result.enterpriseOrderList:result.result.enterpriseCyclingTimeList
                this.rows = []
                this.dataList=[]
                let obj={enterpriseName:"合计"},enterObj={}
                result.result.statisDayList.forEach((item)=>{
                  if(item.colletions.length>0){
                    this.dataList.push(this.dtime(item.statisDate).format("MM-DD"))
                    this.sortByKey(item.colletions, "enterpriseNo").forEach((item1,index)=>{
                      if(!enterObj[item1.enterpriseNo]){
                        enterObj[item1.enterpriseNo]={}
                        enterObj[item1.enterpriseNo].enterpriseName=item1.enterpriseName
                      }
                      enterObj[item1.enterpriseNo][this.dtime(item.statisDate).format("MM-DD")]=item1[objName]
                      obj[this.dtime(item.statisDate).format("MM-DD")]=0
                    })
                  }
                })
                for(var i in enterObj){
                  this.rows.push(enterObj[i])
                }
                this.allCompanyNames=[]
                this.rows.forEach((item,index)=>{
                  this.allCompanyNames.push(item.enterpriseName)
                  this.perHourData1[index]=[]
                  for(var i in item){
                    if(i!="enterpriseName"){
                      this.perHourData1[index].push(item[i]?item[i]:"0")
                      obj[i]+=item[i]?item[i]:0
                      obj[i]=this.toDecimal(obj[i])
                    }
                  }
                })
                this.rows.push(obj)
                setTimeout(()=>{
                  this.$refs.ridingCountEcharts.initData()
                })
              }else if(result.result&&result.result.length>0){
                this.rows = []
                this.dataList=[]
                let obj={enterpriseName:"合计"},enterObj={}
                result.result.forEach((item)=>{
                  if(item.colletions.length>0){
                    this.dataList.push(this.dtime(item.statisDate).format("MM-DD"))
                    this.sortByKey(item.colletions, "enterpriseNo").forEach((item1,index)=>{
                      if(!enterObj[item1.enterpriseNo]){
                        enterObj[item1.enterpriseNo]={}
                        enterObj[item1.enterpriseNo].enterpriseName=item1.enterpriseName
                      }

                      enterObj[item1.enterpriseNo][this.dtime(item.statisDate).format("MM-DD")]=item1[objName]
                      obj[this.dtime(item.statisDate).format("MM-DD")]=0
                    })
                  }
                })
                for(var i in enterObj){
                  this.rows.push(enterObj[i])
                }
                this.allCompanyNames=[]
                this.rows.forEach((item,index)=>{
                  this.allCompanyNames.push(item.enterpriseName)
                  this.perHourData1[index]=[]
                  for(var i in item){
                    if(i!="enterpriseName"){
                      this.perHourData1[index].push(item[i]?item[i]:"0")
                      obj[i]+=item[i]?item[i]:0
                      obj[i]=this.toDecimal(obj[i])
                    }
                  }
                })
                this.rows.push(obj)
                setTimeout(()=>{
                  this.$refs.ridingCountEcharts.initData()
                })
              }else {
                this.enterpriseAvgList=[]
                this.rows=[]
                this.perHourData1=[]
                this.allCompanyNames=[]
                this.dataList=[]
                setTimeout(()=>{
                  this.$refs.ridingCountEcharts.initData()
                })

              }

            }else {
              this.enterpriseAvgList=[]
              this.rows=[]
              this.perHourData1=[]
              this.allCompanyNames=[]
              this.dataList=[]
              setTimeout(()=>{
                this.$refs.ridingCountEcharts.initData()
              })
            }
          })
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .examinationWrap
    page()
    .pageTableInner
      border-radius 5px
      height 100%
      .echartsWrap
        position relative
        height 260px
        padding-top 10px
        border-radius 5px
        background-color white
      .infoSearchWrap
        padding 20px 20px 3px 20px
        overflow hidden
        margin-bottom 10px
        font-size 14px
        background-color white
        border-radius 5px
        .infoSearchOne
          width 100%
          margin-bottom 15px
          .searchWrap
            white-space nowrap
            overflow hidden
            font-size 14px
            line-height 28px
            width 100%
            .searchFont
              margin-left 5px
              font-size 14px
              color #50545D
              font-family SourceHanSansCN-Medium
          .el-radio-button
            .el-radio-button__inner
              border-radius 10px
              padding 5px 15px
          .is-checked
            .el-radio-button__inner
              background-color: #3975FE
              border-radius 10px
              border-color #3975FE
      .tableEchartsWrap
        padding 20px 20px 100px 20px;
        background-color white
        border-radius 5px
        margin-top 10px;
        .tableInner //表格滚动
          width 100%
          overflow-y auto
          .el-table
            overflow-x auto
          .el-table__body-wrapper
            height calc(100% - 30px) !important
            overflow inherit !important
          /*.el-table__footer-wrapper
            overflow auto !important*/
          /*.el-table__body-wrapper, .el-table__footer-wrapper, .el-table__header-wrapper {
             width: auto !important;

          }*/
        .el-table td[rowspan="2"]
          border-right: 1px solid #ebeef5;
        .buttonWrapE
          margin-top 150px
          width 100%
          text-align center


</style>
